<template>
  <div class="clue-part">
    <div class="chart-wrap">
      <Echarts :options="options" height="100%" width="100%"></Echarts>
    </div>
    <div class="list-wrap">
      <div class="block-item" 
        v-for="(item, index) in list"
        :key="index">
        <div class="block" :style="{background: item.bg}"></div>
        <div class="title">{{item.title}}</div>
        <div class="num">{{item.content}} ({{item.percent}}%)</div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue"
import cockpitApi from '@/api/investment/cockpit'

let colorList = ['#C6BC5C', '#0DAEE3', '#5A70BC', '#67D470', '#489BFF']

export default {
  name: "classPro",
  props: ['times'],
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  components: {
    Echarts,
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      list: [],
      options: {
        color: colorList,
        title: {
          text: "专班项目",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff",
          },
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockWise: false,
            radius: ["66%", "86%"],
            hoverAnimation: false,

            data: [
         
            ],

            itemStyle: {
              borderWidth: 1,
              borderColor: "#fff",
            },
            label: {
              show: false,
            },
          },
          {
            type: "pie",
            name: "最内层径向渐变圆心",
            clockWise: false,
            radius: "68%",
            center: ["50%", "50%"],
            z: 1,
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["99%", "99%"],
            itemStyle: {
              normal: {
                borderColor: "#5F9DD6",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      },
    };
  },
  methods: {
    async initOptions() {
      const {data} = await cockpitApi.getDedicatedProject(this.paramsObj)

      let total = 0

      data.forEach(item => total += Number(item.content))

      let list = data.map((item, index) => {
        return {
          bg: colorList[index],
          title: item.name,
          value: item.content,
          content: item.content,
          percent: (item.content / total * 100).toFixed(2)
        }
      }).slice(0, 5)

      this.list = list

      this.$set(this.options.series[0], 'data', list)

    }
  }
};
</script>

<style lang="scss" scoped>
.clue-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  .chart-wrap {
    width: 9.271vw;
    height: 9.271vw;
  }
  .list-wrap {
    width: 11.26vw;
    height: 10.104vw;
  }
  .block-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.938vw;
    .block {
      width: 0.417vw;
      height: 0.417vw;
      background-color: #5A70BC;
    }
    .ttile {
      color: #758BAA;
    }
    .num {
      width: 6.458vw;
      height: 1.458vw;
      line-height: 1.458vw;
      padding-left: 0.521vw;
      background: url('~@/assets/cockpit/item-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
